<template>
    <div>
        <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-button type="primary" @click="dialogVisible = true" id="add">添加新的企业</el-button>
      </el-form-item>
    </el-form>
      <!-- 添加企业对话框 -->
      <el-dialog title="添加企业" :visible.sync="dialogVisible" width="40%">
        <el-form ref="form" :model="add_form" label-width="80px">
          <el-form-item label="企业名称">
            <el-input v-model="add_form.name" placeholder="请输入企业名称"></el-input>
          </el-form-item>
          <el-form-item label="行业类型">
            <el-select v-model="add_form.industry" placeholder="选择行业类型">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="企业地址">
            <el-input v-model="add_form.address" placeholder="输入企业地址"></el-input>
          </el-form-item>
          <el-form-item>
            <el-link href="https://www.hongyuan3e.com/data/introduce.html" type="primary">查看企业碳核算指南</el-link>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="add" id="add_submit">提交</el-button>
            <el-button @click="dialogVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
  
      <!-- 表格展示现有企业数据 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index" width="50"> </el-table-column>
        <el-table-column prop="name" label="企业名称" width="300"> </el-table-column>
        <el-table-column prop="industry" label="行业类型" width="300"> </el-table-column>
        <el-table-column prop="address" label="企业地址" width="300"> </el-table-column>
        <el-table-column prop="h" label="碳核算指南" width="100">
            <template slot-scope="scope">
            <el-link href="https://www.hongyuan3e.com/data/introduce.html" type="primary">{{scope.row.name}}碳核算指南</el-link>
          </template></el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button  type="primary" size="mini" @click="openEditDialog(scope.row)">编辑</el-button>
            <el-button  type="danger" size="mini" @click="deleteEnterprise(scope.row.id)"
              >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 编辑企业对话框 -->
      <el-dialog title="修改企业信息" :visible.sync="dialogVisible_up" width="40%">
        <el-form ref="form" :model="update_dorm" label-width="80px">
          <el-form-item label="企业名称">
            <el-input v-model="update_dorm.name" placeholder="请输入企业名称"></el-input>
          </el-form-item>
          <el-form-item label="行业类型">
            <el-select v-model="update_dorm.industry" placeholder="选择行业类型">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="企业地址">
            <el-input v-model="update_dorm.address" placeholder="输入企业地址"></el-input>
          </el-form-item>
          <el-form-item>
            <el-link href="https://www.hongyuan3e.com/data/introduce.html" type="primary">查看企业碳核算指南</el-link>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="update">提交</el-button>
            <el-button @click="dialogVisible_up = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        dialogVisible: false,
        dialogVisible_up: false,
        tableData: [
          { id: 1, name: '企业A', industry: '制造业', address: '上海市浦东新区' , h:'https://www.hongyuan3e.com/data/introduce.html'},
          { id: 2, name: '企业B', industry: '能源行业', address: '北京市朝阳区', h:'https://www.hongyuan3e.com/data/introduce.html' },
          { id: 3, name: '企业C', industry: '建筑行业', address: '天津市' , h:'https://www.hongyuan3e.com/data/introduce.html'},
          // 更多模拟数据...
        ],
        options: [
          { id: 1, name: '制造业' },
          { id: 2, name: '能源行业' },
          { id: 2, name: '建筑行业' },
          // 更多行业选项...
        ],
        add_form: {
            name: "",
          industry: '',
          address: ''
        },
        update_dorm: {
          name: "",
          industry: '',
          address: ''
        },
      };
    },
    methods: {
      add() {
        // 添加企业逻辑，例如调用API并将新添加的企业数据加入tableData
        this.$message({
              message: "添加成功",
              type: 'success'
            });
            this.dialogVisible=false;
      },
      openEditDialog(row) {
        this.update_dorm = { ...row };
        this.dialogVisible_up = true;
      },
      deleteEnterprise() {
        // 删除企业逻辑，例如调用API并从tableData中移除该企业
      },
      update(){
        this.$message({
              message: "修改成功",
              type: 'success'
            });
            this.dialogVisible_up=false;
      }
      // 其他方法...
    },
  };
  </script>